<template>
    <el-container class="main_container">
        <el-header class="main_header">
            <Header></Header>
        </el-header>
        <el-container>
            <el-aside :class="asideMenuInfo.menuCollapse ? 'fold_main_aside' : 'main_aside'">
                <AsideNav></AsideNav>
            </el-aside>
            <el-main class="main_content" v-if="!settingInfo.isRefreshing">
                <Breadcrumb></Breadcrumb>
                <el-scrollbar 
                    :class="topBreadcrumbInfo.showTopBreadcrumb ? 'main_content_scroll' : 'expand_main_content_scroll'">
                    <RouterView></RouterView>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup lang='ts' name="Main">

    import { ElNotification } from 'element-plus';
    import { onMounted } from 'vue';
    import { useAsideMenuInfoStore } from "@/store/asideMenuInfo";
    import { useUserInfoStore } from "@/store/userInfo";
    import { useSettingInfoStore } from "@/store/settingInfo";
    import { useTopBreadcrumbInfoStore } from "@/store/topBreadcrumbInfo";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import request from "@/requests/request";
    const asideMenuInfo = useAsideMenuInfoStore()
    const userInfo = useUserInfoStore()
    const settingInfo = useSettingInfoStore()
    const topBreadcrumbInfo = useTopBreadcrumbInfoStore()


    function getWelcomeTitle(): string {
        const hour = new Date().getHours()
        if (hour >= 6 && hour <= 11) {
            return "上午好"
        } else if (hour > 11 && hour <= 13) {
            return "中午好"
        } else if (hour > 13 && hour <= 19) {
            return "下午好"
        } else if (hour > 19 && hour <= 23) {
            return "晚上好"
        } else {
            return "夜深了，请注意休息"
        }
    }

    onMounted(() => {
        request.post("/queryAccountInfo").then((res: any) => {
            const {data, message, resCode} = res.data
            console.log("/queryAccountInfo", data, message, resCode)
            if (data) {
                userInfo.realName = data.realName
                userInfo.account = data.account
                if (data.avatarUrl && data.avatarUrl.length > 0) {
                    userInfo.avatarUrl = data.avatarUrl
                } else {
                    userInfo.avatarUrl = "http://8.134.212.211:9000/gcu-file-storage-avatar/default-avatar/default-avatar.jpg"
                }
                ElNotification({
                    type: "success",
                    title: `${getWelcomeTitle()}`,
                    message: `欢迎来到${userInfo.realName}的存储空间`,
                    duration: 3000,
                })
            } else {
                userInfo.realName = ""
            }
        }).catch((reason: any)=> {
            console.log(reason)
        })
    })

</script>


<style scoped lang="scss">
    .main_container {
        width: 100%;
        height: 100vh;

        .main_header {
            height: $mainHeaderHeight;
            width: 100%;
            background-color: $primaryColor;
        }

        .main_aside {
            width: $mainAsideMenuWidth;
            height: calc(100vh - $mainHeaderHeight);
            transition: width 800ms;
        }
        
        .fold_main_aside {
            width: $foldMainAsideMenuWidth;
            transition: width 800ms;
        }

        .main_content {
            padding: 0;
        }

        .main_content_scroll {
            height: calc(100vh - $mainHeaderHeight - $topBreadcrumbHeight);
            --el-scrollbar-bg-color: purple;
            --el-scrollbar-hover-bg-color: purple;
        }

        .expand_main_content_scroll {
            height: calc(100vh - $mainHeaderHeight);
            --el-scrollbar-bg-color: purple;
            --el-scrollbar-hover-bg-color: purple;
        }



        // ::-webkit-scrollbar {
        //     width: 10px;
        // }

        // ::-webkit-scrollbar-track {
        //     background-color: $asideBackgroundColor;
        //     -webkit-border-radius: 5px;
        //     -webkit-border-color: $primaryColor;
        //     -webkit-border-style: solid;
        //     -moz-border-radius: 5px;
        //     -moz-border-color: $primaryColor;
        //     -moz-border-style: solid;
        //     border-radius: 5px;
        //     border-color: $primaryColor;
        //     border-style: solid;
        // }

        // ::-webkit-scrollbar-thumb {
        //     background-color: $primaryColor;
        //     -webkit-border-radius: 5px;
        //     -moz-border-radius: 5px;
        //     border-radius: 5px;
        // }
    }
</style>